<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>10_伪类选择器_结构伪类_2</title>
    <style>
     /* 选中的是div的最后一个儿子p元素-结构1 */
        /* div>p:last-child {
        color: red;
    } */
    
    /* 选中的是div的第n个儿子p元素-结构2 */
     /* div>p:nth-child(3) {
        color: red;
     } */
    
     /* 选中的是div的前五个p元素-结构2 */
     /* div>p:nth-child(-n+5) {
        color: red;
     } */

    /* 选中的是div的所有p元素的前五个-结构3 */
     div>p:nth-of-type(-n+5) {
        color: red;
     }
    </style>
</head>
<body>
        <!-- 结构一 -->
    <!-- <div>
       <p>张三：99分</p>
       <p>李四：98分</p>
       <p>王五：78分</p>
       <p>赵六：68分</p>
       <p>孙七：58分</p>
       <p>老八：48分</p>
    </div> -->
    
        <!-- 结构二 -->
       <!-- <div>
        <p>第1个</p>
        <p>第2个</p>
        <p>第3个</p>
        <p>第4个</p>
        <p>第5个</p>
        <p>第6个</p>
        <p>第7个</p>
        <p>第8个</p>
        <p>第9个</p>
        <p>第10个</p>
       </div>   -->
       
       <!-- 结构三 -->
        <div>
            <span>测试</span>
            <p>张三：99分</p>
            <span>测试1</span>
            <p>李四：98分</p>
            <span>测试2</span>
            <p>王五：78分</p>
            <span>测试3</span>
            <p>赵六：68分</p>
            <span>测试四</span>
            <p>孙七：58分</p>
            <p>老八：48分</p>
        </div>
</body>
</html>